// we use placeholder selector to make it easier to rename the block
// we can't extend selectors with &, so we don't use them for extends
$main-loud
    font-size 15px
    font-weight 700
    line-height 21px
    margin 1em 0

.main
    margin auto
    padding 0 0 35px

    &_width-limit
        max-width max_width

    &_width-limit-wide
        max-width max_width_wide


    &::before,
    &__header::before
        content ""
        display table // убираем margin collapse

    &__header .breadcrumbs
        margin 0 0 12px 0
        padding 0

    &__header
        margin 40px 0 16px 0

    &__header_center
        border 0

    &__header_center &__header-title,
    &__header_center .breadcrumbs
        text-align center

    & &__header-title
        font 700 32px/40px secondary_font
        margin 0 auto 12px auto
        padding 0

        @media screen and (max-width 1180px)
            max-width 430px

    & &__header-title:not(::first-line)
        color green

    & &__header-title:only-child
        padding-bottom 5px

    &__username
        font-style inherit
        font-weight inherit
        color secondary_color

    &__header-nav
        float right

    &__lesson-nav
        display table
        float right

    &__lesson-nav-prev,
    &__lesson-nav-next
        display table-cell

    &__lesson-nav-prev
        padding-right 15px
        border-right 2px solid #f5f2f0

    &__lesson-nav-next
        if isRTL
            padding-right 15px
        else
            padding-left 15px

    &__lesson-nav-prev:last-child
        border none
        padding-right 0

    &__lesson-nav kbd
        font-size 11px
        color light_gray_color
        font: inherit

    &__lesson-nav-arr
        position relative
        top -.1em

    &__lesson-nav-link
        color #656565
        text-decoration underline

    ul,
    ol
        if isRTL
                padding-right 21px
        
        else
            padding-left 21px
        margin 22px 0 // уравниваем с абзацными отступами

        > li
            margin: .3em 0

    // для вложенных списоков в статьях
    ul ul, ul ol, ol ul, ol ol
        margin-top 0
        margin-bottom 0

    ul > li::before
        content "●"
        if isRTL
                float right
                margin-right -20px
        else 
            float left // not position: absolute because the latter doesn't show in iBooks (epub)
            margin-left -20px
        color #000
        font-size 8px

    // TODO: h1 вне блока .main__header ??! Проверить, встречается ли
    h1
        margin-bottom .5em
    /* FIXME пока некрасиво с этим: page-break-before: always; */

    h2
        margin 24px 0 12px
        font-size 24px
        line-height 32px
        font-family font
        position relative

    h3,
    h4
        margin 30px 0 22px

    h3
        font-size 128%
        line-height 120%

    h4
        font-size 114%
        line-height 125%

    // h5 actually appears only in ebook
    h5
        font-size 110%
        line-height 125%

    // исключения, полные отступы смотрятся неряшливо
    h2 + h3,
    h3 + h4
        margin-top -8px

    h2,
    h3,
    h4
        position relative

    h2 &__anchor,
       h3 &__anchor,
       h4 &__anchor
           transition unquote('color') animation_duration

    h2 &__anchor:hover,
       h3 &__anchor:hover,
       h4 &__anchor:hover
           color hoverize(color)

    h1 code,
    h1 a,
    h2 code,
    h2 a,
    h3 code,
    h3 a,
    h4 code,
    h4 a
        font inherit
        color inherit
        text-decoration none

    h1,
    h2,
    h3,
    h4,
    h5
        page-break-after avoid

    h1 + p,
    h2 + p,
    h3 + p,
    h4 + p,
    h5 + p
        page-break-before avoid

    // .format_error - old code support?
    .format_error
        color red

    div.format_error
        border 1px solid red
        padding 5px

    .admin_link
        float right
        color gray

    &__anchor
        outline 0

    &__anchor::before
        @extend $font-link
        position absolute
        right 100%
        width 30px
        text-align left
        outline 0
        color #D8D8D8
        font-size 90%
        line-height inherit
        font-weight 400
        opacity 0
        transition opacity animation_duration

    &__anchor:hover::before
        opacity 1

    &__anchor_noicon::before
        display none

    code
        /* disabled the line below for code in colored lines to show up correctly */
        /* did it break something? fix it there! */
        /* color code_color */
        font-family fixed_width_font
        padding 2px 4px
        background #f5f2f0
        border-radius 2px

    /* for regexps */
    code.pattern
        border-bottom 1px solid red

    code.subject
        border-bottom 1px solid blue

    code.match
        border-bottom 1px solid green

    span.shortcut
        white-space nowrap

    span.shortcut code
        border 1px solid rgb(51,51,51)
        padding 0 1px
        display inline-block
        margin 1px 0

    p
        margin 0 0 12px

    // Is it really used?
    dl
        margin 1em 0

    dt
        font-weight 700

    dd
        margin 8px 0 22px 0px
    /*
    figure
        margin 30px 0
        padding 30px
        border 3px solid #F5F2F0
        border-radius 6px
    */
    &__loud
        @extend $main-loud

    &__strong
        @extend $main-loud
        font-style italic
        color #8C0000

    &__footer
        @extend $clearfix
        background #F5F5F2
        margin 30px 0 27px
        padding 16px 40px 9px

        .rating
            margin-right 22px

        .social
            float right

    &__footer-date,
    &__footer-author,
    &__footer-author a
        color #444
        font 13px Arial, Helvetica, sans-serif

    &__footer-date
        margin-right 15px

    &__footer-author
        margin-right 10px

    &__footer-star
        position absolute
        font-size 18px
        color #BBB
        margin 0 10px

    &__footer-star::before
        @extend $font-star
        display inline-block
        vertical-align middle
        min-width 17px
        min-height 19px

    .clearfix
        @extend $clearfix

    @media tablet
        padding 0 0 35px

    @media phone

        &
            padding-bottom 0

        & &__header-title
            font-size 34px

    @media (min-width: media_step_1)
        line-height 19px

    @media (min-width: media_step_2)
        line-height 20px

    @media (min-width: media_step_3)
        line-height line_height_m

    @media (min-width: largescreen)
        font-size 16px
